<template>
      <div>
            <div class="col-xs-12" v-for="index in storeNum" :key="index">
                  <div class="input-group">
                        <input type="text" class="form-control input-sm" :placeholder="title[index-1]" :style="{'backgroundColor':storeInputColor}" 
                              @change="changeStoreName(index-1,$event)" :value="storeObj.name[index-1]">
                        <span class="input-group-btn">
                              <input class="btn btn-default btn-sm" type="button" style="width:100px;" @click="showModule" :value="buttonName"/>
                        </span>
                  </div> 
            </div>
      </div>
</template>
<script>
/*
#####DATA
store:{name:[],value:[]},
company:"0001",
mast:{mastType:"company",mastClass:"0000"},
num:5

###调用
<storeGroupComponent :storeObj="prodTest.prod" :company="prodTest.company" :storeMast="prodTest.mast" :storeInputNum="prodTest.num"></storeGroupComponent>
*/
import storeGrp from 'storeGrp';
export default {
      name:'storeGroupComponent',
      props:{
            //{name:['a','b','c'],value[[],[],[]]}
            storeObj:{
                  type:Object
            },
            storeMast:{
                  type:Object
            },
            storeInputNum:{
                  type:Number,
                  default:function(){
                        return 5;
                  }
            },
            company:{
                  type:String
            },
            isfav:{
                  type:Object
            }
      },
      data:function(){
            return {
                  storeNum:this.storeInputNum,
                  storeGroup:new storeGrp(window.$),
                  buttonName:'店舗選択',
                  storeInputColor:'',
                  title:['グループA','グループB','グループC','グループD','グループE',
                  'グループF','グループG','グループH','グループI','グループG',
                  'グループK','グループL','グループM','グループN','グループO',
                  'グループP','グループQ','グループR','グループS','グループT',
                  'グループU','グループV','グループW','グループX','グループY',
                  'グループZ','グループAB','グループAC','グループAD','グループAE',
                  'グループAF','グループAG','グループAH','グループAI','グループAJ',
                  'グループAK','グループAL','グループAM','グループAN','グループAO',
                  'グループAK','グループAL','グループAM','グループAN','グループAO',
                  'グループAO','グループAQ','グループAR','グループAS','グループAT',
                  'グループAU','グループAV','グループAW','グループAX','グループAY',
                  'グループAZ','グループBA','グループBC','グループBD']
            };
      },
      computed:{
            listenChange () {
                  const {company,storeMast} = this;
                  return {company,storeMast};
            }
      },
      watch:{
            listenChange(){  
                  this.initStoreGroup(); 
                  //非fav click
                  if(this.isfav.store_group!==true){                     
                        this.storeObj.value = [];
                        this.storeObj.name = [];
                  }
            },
            'storeObj.value'(){
                  if(this.storeObj.value.length > 0 ){
                        this.buttonName = '選択済み';
                        this.storeInputColor = '#BBFFFF';
                        this.storeNum = this.storeObj.value.length;
                  }else{
                        this.buttonName = '店舗選択';
                        this.storeInputColor = '';
                        this.storeNum = this.storeInputNum;
                  }
                  this.isfav.store_group = false;
            }
      },
      methods:{
            initStoreGroup(){
                  var vm = this;
                  this.buttonName='店舗選択';
                  this.storeInputColor='';
                  var initParam = {
                        usercd: global.userCd,
                        elementId: 'storeModule',
                        tab: '1-1',
                        level: 's-b-t',
                        option:'1-1-1'
                  };
                  if(this.storeMast.type  === 'company'){
                        initParam.kigyoucd = this.company;
                  }else{
                        initParam.kigyoucd = global.suntoryCd;
                        initParam.isCoreKigyo = '1';
                        initParam.mstclass = this.storeMast.value;
                        initParam.subkigyoucds = this.company;
                  }
                  initParam.callback={
                        afterInit:function(){
                              if(vm.storeObj.value.length>0){
                                    vm.storeGroup.setStoresFavGrp({'storeArr':vm.storeObj.value,'type':vm.storeObj.stype});
                              }
                        },
                        afterSelectedOK:function(){
                              vm.storeObj.value = vm.storeGroup.getStoresFavGrp();
                              var selectStoreNum = vm.storeObj.value.length;
                              vm.storeNum = selectStoreNum === 0 ? vm.storeInputNum : selectStoreNum;
                              for (var index = 0; index < selectStoreNum; index++) {
                                    if( vm.storeObj.name[index] === undefined || vm.storeObj.name[index] === ''){
                                          vm.storeObj.name[index] = vm.title[index];
                                    }
                              }
                        }
                  };
                  var yTimeDate = new Date(new Date().getTime()-(24*60*60*1000));
                  var yTime = ''+yTimeDate.getFullYear()+(yTimeDate.getMonth()+1)+(yTimeDate.getDate().toString().length < 2 ?'0'+yTimeDate.getDate():yTimeDate.getDate());
                  initParam.startTime=yTime;
                  initParam.endTime = yTime;
                  initParam.timeType = 'M';
                  vm.storeGroup.init(initParam);

            },
            changeStoreName(index,event){
                  var name = event.target.value;
                  if(name !== '' && name.trim() !== '' && name != null && name != undefined){
                        this.$set(this.storeObj.name,index,name);
                  }else{
                       if(this.storeObj.value[index].length > 0 ){
                             this.$set(this.storeObj.name,index,this.title[index]);
                       } 
                  }
            },
            showModule(){
                  this.storeGroup.show();
            }
      },
      mounted(){
            var vm = this;
            var storeGrpTimeIn = window.setInterval(function(){
                  if(vm.storeObj !== undefined){
                        // vm.storeObj.name = new Array(vm.storeInputNum).fill('');
                        // vm.storeObj.value = new Array(vm.storeInputNum).fill([]);
                        vm.storeObj.name = [];
                        vm.storeObj.value = [];
                        vm.initStoreGroup();
                        clearInterval(storeGrpTimeIn);
                  }
            },300);
      }
};
</script>